import { View, Image } from '@hips/taro-ui'
import Styles from './tend-list.module.less'
import selectedIcon from 'assets/icons/tent-selected.png'
import unSelectedIcon from 'assets/icons/tent-no-selected.png'
import isSelectedIcon from 'assets/icons/radio.png'
export default {
  name: 'TendList',
  props: {
    tendList: {
      type: Array,
      default: () => []
    },
    currentTendIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      title: '当前租户'
    }
  },
  methods: {
    changeTend(item, index) {
      if (this.currentTendIndex === index) return
      this.$emit('changeTend', item)
    }
  },
  render() {
    return (
      <View class={Styles['tend-list']}>
        <View class={Styles['tend-list-title']}>{this.title}</View>
        <View class={Styles['tend-list-box']}>
          {this.tendList.map((item, index) => {
            const isSelected = index === this.currentTendIndex
            return (
              <View
                onTap={() => this.changeTend(item, index)}
                class={[
                  Styles['tend-list-box-item'],
                  Styles[isSelected && 'tend-list-box-selected']
                ]}
              >
                <View class={Styles['tend-list-box-item-info']}>
                  <Image
                    class={Styles['tend-list-box-item-info-icon']}
                    src={isSelected ? selectedIcon : unSelectedIcon}
                  ></Image>
                  <View class={Styles['tend-list-box-item-info-name']}>
                    {item.tenantName}
                  </View>
                </View>
                {isSelected && (
                  <Image
                    class={Styles['tend-list-box-item-isSelected']}
                    src={isSelectedIcon}
                  ></Image>
                )}
              </View>
            )
          })}
        </View>
      </View>
    )
  }
}
